
import React from 'react'
import {
  View,
  Text,
  StyleSheet,
  Image,
  Platform,
  TouchableOpacity
} from 'react-native';


import colors from '../../config/colors';
import { getDisplayName } from '../../utils/ItemsUtil';
const randomColor = require('randomcolor');

class MemberCell extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      checked: props.checked || false
    }
    this.checked = false;
  }

  onChecked (item) {
    this.setState({checked: !this.state.checked})
    requestAnimationFrame(() => this.props.onChecked && this.props.onChecked(item))
  };

  render() {
    const item = this.props.item ? this.props.item : this.props;
    return (
      <View 
      style={
        [styles.cellContainerStyle, 
        this.props.cellContainerStyle && this.props.cellContainerStyle,
        item.disabled && styles.disabledStyle
      ]}>
      { this.props.checkbox &&
          <View 
          style={styles.checkboxWrapperStyle} 
          >
            {  !item.disabled &&
              <TouchableOpacity
              onPress={() => this.onChecked(item)}>{ 
                (!this.state.checked && !this.props.checked)
                && (<View 
                      style={styles.checkboxStyle} 
                    />
                    ) ||
                    (
                      <View 
                      style={[styles.checkboxStyle, styles.checkboxSelectedStyle]}
                      />
                    )
                }
                </TouchableOpacity>
              || 
              (<View 
                style={[styles.checkboxStyle]} 
              />)
            }
          </View>
        }
        { item.headimgurl && this.props.showImage &&
          (<Image 
          resizeMode='cover'
          style={styles.cellImageStyle} 
          source={{uri: item.headimgurl}} />)
          || (
          <View 
          style={[
            styles.cellImageStyle, 
            styles.displayNameWrapperStyle,
            item.randomColor && {backgroundColor: randomColor()}
            ]}
          >
            <Text 
            style={styles.displayNameStyle}
            numberOfLines={1}>
            {getDisplayName(item.name)}</Text>
          </View>)
        }
        <Text
        style={styles.cellTextStyle}>{item.name}</Text>
        {this.props.rightText &&
        <Text
          style={styles.rightTextStyle}>{this.props.rightText}</Text>
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  cellContainerStyle: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 70,
    backgroundColor: 'white',
    paddingLeft: 10
  },
  cellImageStyle: {
    width: 50,
    height: 50,
    borderRadius: 25
  },
  cellTextStyle: {
    flex: 6,
    marginLeft: 15
  },
  rightTextStyle: {
    flex: 1,
    marginRight: 30,
    textAlign: 'right',
    fontSize: 12,
    color: colors.grey7
  },
  checkboxWrapperStyle: {
    padding: 15
  },
  displayNameWrapperStyle: {
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: colors.grey7,
    justifyContent: 'center',
    backgroundColor: colors.blue4
  },
  displayNameStyle: {
    color: 'white',
    fontWeight: 'bold'
  },
  checkboxStyle: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: colors.grey7
  },
  checkboxContentStyle: {
    width: 5,
    height: 8,
    marginLeft: 6,
    marginTop: 6,
    display: 'none'
  },
  checkboxSelectedStyle: {
    backgroundColor: colors.blue4
  },
  disabledStyle: {
    opacity: 0.4
  }
});

export default MemberCell;